<template>
    <van-list
    v-model="loading"
    :finished="finished"
    finished-text="没有更多了"
    @load="queryData"
    >
        <template v-for="row in tableData">
            <van-cell :title="row.truename" :value="row.mobile" class="list-item">
                <template slot="title">
                    <img class="user-head" src="~@/assets/phone.png"/>
                    <span class="user-name">
                        {{row.truename}}
                    </span>
                </template>
            </van-cell>
        </template>
    </van-list>
</template>

<script>
import Qs from 'qs'

export default {
    data() {
        return {
            tableData: [],

            loading: false,
            finished: false,
            pageindex: 1
        }
    },
    methods: {
        queryData() {
            var query = {
                pageindex: this.pageindex
            };
            this.$axios({
                url: '/usermg/userlist.json',
                method: 'get',
                params: query
            }).then(data => {
                console.log(data)
                this.loading = false;

                if(((data.pageIndex + 1) * data.pageSize) >= data.total) {
                    this.finished = true
                };

                this.pageindex ++;
                this.tableData = data.rows;
            });
        }
    },
    mounted() {

    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .user-head{width:2em; float:left;}
    .user-name{line-height:2em; float:left; margin-left:1em;}
    .list-item{padding:15px;}
</style>
